<template>
	<view class="info_warp">
		<view class="form_box">
			<view class="alert_box">
				<u-button plain shape="circle" type="warning" size="medium">
					<u-icon name="tishishuoming" customPrefix="coolc" top="2" color="#fcbd71" size="32"></u-icon> 请认真核对信息，如填写不正确将导致提现失败。
				</u-button>
			</view>
			<u-form>
				<u-form-item class="uformitem" label="类型" labelPosition="left">
					<u-radio-group v-model="value">
						<u-radio 
							@change="SetBorderSize" 
							v-for="(item, index) in list" :key="index" 
							:name="item.value"
							active-color="#fcbd71"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item class="uformitem" :label="name_tips" labelPosition="top">
					<input :placeholder="'请输入' + name_tips" name="bank_user_name" v-model="info.bank_user_name"></input>
				</u-form-item>
				<u-form-item class="uformitem" label="开户银行" labelPosition="top" v-if="value == 0">
					<picker mode="selector" @change="bankChange" :range="banks" range-key="name">
						<view class="picker">{{checkbank}}</view>
					</picker>
				</u-form-item>
				<u-form-item class="uformitem" label="支行名称" labelPosition="top" v-if="value == 0">
					<input placeholder="请输入支行名称" name="sub_name" v-model="info.sub_name"></input>
				</u-form-item>
				<u-form-item class="uformitem" :label="card_name" labelPosition="top">
					<input :placeholder="'请输入' + card_name" @input="bank_num_input" name="card_no" v-model="info.card_no"></input>
				</u-form-item>
				<u-form-item labelPosition="top">
					<text class="card_num">{{bank_card_show}}</text>
				</u-form-item>
				<view class="submitBtn">
					<u-button type="success" @click="saveadd">提交保存</u-button>
				</view>
		
			</u-form>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			info:{
				bank_user_name: '',
				sub_name: '',
				card_no: '',				
			},
			bank_card_show : "---- ---- ---- ---",
			checkbank:'请选择开户银行',
			card_name:'银行卡号',
			name_tips:'开户名称',
			type_account: 0,
			banks: [{
				'name':'请选择'
			}],
			list: [
				{
					name: '银行卡',
					value: 0,
					disabled: false
				},
				{
					name: '微信',
					value: 1,
					disabled: false
				},
				{
					name: '支付宝',
					value: 2,
					disabled: false
				}
			],
			value: 0,
		}
	},
	onLoad(){
		this.init();
	},
	methods: {
		init(){
			this.$u.post('block/banks').then(res => {
				for(let i in res)
				{
					this.banks.push(res[i]);
				}
			}).catch(e => {
				console.log(e);
			});
			
			this.$u.post('user/bank').then(ret => {
				this.info = ret;
				if(ret.id){
					this.card_no = ret.card_no;
					this.checkbank = ret.bank_name;
					if(this.checkbank == '微信')
					{
						this.value = 1;
					}else if(this.checkbank == '支付宝')
					{
						this.value = 2;
					}
					
					this.bank_card_show = ret.card_no.replace(/\s/g,'').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g,'$1 ');
				}
			}).catch(e => {
				console.log(e);
			});
		},
		SetBorderSize(e){
			if(e == 1){
				this.name_tips = '微信名称';
				this.card_name = '微信帐号';
				this.checkbank = '微信';
			}else if(e == 2){
				this.name_tips = '支付宝名称';
				this.card_name = '支付宝帐号';
				this.checkbank = '支付宝';
			}else{
				this.name_tips = '开户名称';
				this.card_name = '银行卡号';
			}
		},
		bank_num_input:function(event){
			this.bank_card_show = event.target.value.replace(/\s/g,'').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g,'$1 ');
		},
		bankChange(e){
			if(e.detail.value == 0){
				this.checkbank = '请选择开户银行';
			}else{
				this.checkbank = this.banks[e.detail.value].name;
			}
		},
		saveadd(e){
			var data = this.info;
			
			if(!data.bank_user_name){
				uni.showToast({
				    icon: 'none',
				    title: '开户姓名不能为空'
				});
				return;
			}
			
			if(this.checkbank == '请选择开户银行'){
				uni.showToast({
				    icon: 'none',
				    title: '请选择开户银行'
				});
				return;
			}
			
			if(this.checkbank == 0 && !data.sub_name){
				uni.showToast({
				    icon: 'none',
				    title: '支行名称不能为空'
				});
				return;
			}
			
			if(!data.card_no){
				uni.showToast({
				    icon: 'none',
				    title: '银行卡号不能为空'
				});
				return;
			}

			if(this.checkbank != '请选择开户银行'){
				data.bank_name = this.checkbank;
			}
			
			this.$u.post('user/bank_save',data).then(rev => {
				uni.showToast({
					title:'保存成功',
				});
				setTimeout(function() {
					uni.navigateBack();
				},1500);
			}).catch(e => {
				console.log(e);
			});
		}
	}
}
</script>

<style lang='scss'>
	page {
		background: #f1f1f1;
	}
	.card_num {
		width:100%;
		display:block;
		text-align:center;
		font-size:16px;
		font-weight:bold;
		color:#ff0000;
	}
	.margin-left-sm {
		padding-right:15px;
		
		text {
			padding-left:3px;
		}
	}
	.submitBtn {
		padding: 20px 17px;
	}
</style>
